import React, {Component} from 'react';
// 导入路由跳转的组件
import { Link, NavLink,Redirect } from 'react-router-dom';
class ComC extends React.Component{
  constructor() {
    super();
    this.state = {
      msg: 'hello',
      blogURL: '/blog'
    }
  }
  valChange(e) {
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    })
  }
  chagnePage(url) {
    // 编程式导航
    this.props.history.push(url);
    // replace: 替换历史记录
    // go：前进或者后退
    // goBack：后退
  }
  render() {
    return  (<div>
      <p>react模拟实现表单的双向绑定</p>
      {/* <input @input="valChange(e)" :value="msg"/> */}
      <input onChange={(e)=>this.valChange(e)} value={this.state.msg} />
      <p>输入框中的值：{this.state.msg}</p>
      <NavLink to="/index" activeClassName="aaa">首页</NavLink>
      <Link to={this.state.blogURL}>Blog页面</Link>
      <Link to="/ComFather">父组件页面</Link>
      <p>NavLink这个组件，可以指定链接被激活时拥有的class，默认是：class="active"</p>
      <p>NavLink这个组件的activeClassName属性可以修改激活时class的值</p>
      <hr />
      <button onClick={this.chagnePage.bind(this, '/index')}>首页</button>
      <button onClick={this.chagnePage.bind(this, '/blog')}>Blog页面</button>
      <button onClick={this.chagnePage.bind(this, '/ComFather')}>父组件页面</button>
    </div>)
  }
}
export default ComC